<template>
	<view class="camera-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="iconfont icon-back"></text>
				<text class="header-title">实时监控</text>
			</view>
		</view>

		<!-- 摄像头视图区域 -->
		<view class="camera-view" :class="{ 'fullscreen': isFullscreen }">
			<!-- #ifdef APP-PLUS -->
			<view class="camera-placeholder" v-if="!isCameraOn">
				<text class="placeholder-text">点击按钮开启摄像头</text>
			</view>
			<!-- #endif -->
			
			<!-- #ifdef H5 -->
			<view class="camera-placeholder">
				<text class="placeholder-text">H5环境暂不支持摄像头</text>
			</view>
			<!-- #endif -->
			
			<!-- 控制按钮 -->
			<view class="camera-controls">
				<view class="control-btn" @tap="toggleFullscreen">
					<text class="iconfont" :class="isFullscreen ? 'icon-shrink' : 'icon-fullscreen'"></text>
				</view>
				<view class="control-btn" @tap="toggleCamera">
					<text class="iconfont" :class="devicePosition === 'back' ? 'icon-camera-front' : 'icon-camera-back'"></text>
				</view>
				<view class="control-btn" @tap="takeSnapshot">
					<text class="iconfont icon-photo"></text>
				</view>
			</view>
		</view>

		<!-- 设备信息 -->
		<view class="device-info">
			<view class="info-header">
				<text class="title">设备信息</text>
				<text class="status online">在线</text>
			</view>
			<view class="info-content">
				<view class="info-item">
					<text class="label">设备名称：</text>
					<text class="value">摄像头01</text>
				</view>
				<view class="info-item">
					<text class="label">设备ID：</text>
					<text class="value">CAM001</text>
				</view>
				<view class="info-item">
					<text class="label">分辨率：</text>
					<text class="value">1920×1080</text>
				</view>
				<view class="info-item">
					<text class="label">帧率：</text>
					<text class="value">30fps</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFullscreen: false,
				isCameraOn: false,
				devicePosition: 'back', // 后置摄像头
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			
			// 初始化摄像头
			initCamera() {
				// #ifdef APP-PLUS
				if (window.plus) {
					plus.camera.getCamera().then(camera => {
						this.isCameraOn = true;
						console.log('摄像头初始化成功');
					}).catch(error => {
						console.error('摄像头初始化失败:', error);
						uni.showModal({
							title: '提示',
							content: '摄像头初始化失败，请检查权限设置',
							showCancel: false
						});
					});
				} else {
					console.error('不支持plus API');
					uni.showModal({
						title: '提示',
						content: '当前环境不支持摄像头功能',
						showCancel: false
					});
				}
				// #endif
				
				// #ifdef H5
				uni.showModal({
					title: '提示',
					content: 'H5环境暂不支持摄像头功能',
					showCancel: false
				});
				// #endif
			},
			
			// 切换全屏
			toggleFullscreen() {
				this.isFullscreen = !this.isFullscreen;
			},
			
			// 切换摄像头
			toggleCamera() {
				// #ifdef APP-PLUS
				if (window.plus) {
					this.devicePosition = this.devicePosition === 'back' ? 'front' : 'back';
					// 重新初始化摄像头
					this.initCamera();
				}
				// #endif
			},
			
			// 截图功能
			takeSnapshot() {
				// #ifdef APP-PLUS
				if (window.plus && this.isCameraOn) {
					plus.camera.captureImage(
						(path) => {
							// 保存图片到相册
							plus.gallery.save(path, () => {
								uni.showToast({
									title: '截图已保存',
									icon: 'success'
								});
							}, (error) => {
								uni.showToast({
									title: '保存失败',
									icon: 'none'
								});
								console.error('保存失败：', error);
							});
						},
						(error) => {
							uni.showToast({
								title: '截图失败',
								icon: 'none'
							});
							console.error('截图失败：', error);
						},
						{
							filename: '_doc/camera/',
							index: this.devicePosition === 'back' ? 1 : 2
						}
					);
				} else {
					uni.showToast({
						title: '请先开启摄像头',
						icon: 'none'
					});
				}
				// #endif
			},
			
			// 检查运行环境
			checkEnvironment() {
				// #ifdef APP-PLUS
				if (!window.plus) {
					console.error('未找到plus对象');
					uni.showModal({
						title: '提示',
						content: '当前环境不支持摄像头功能',
						showCancel: false
					});
					return false;
				}
				return true;
				// #endif
				
				// #ifdef H5
				return false;
				// #endif
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			if (this.checkEnvironment()) {
				// 等待plus对象就绪
				if (window.plus) {
					this.initCamera();
				} else {
					document.addEventListener('plusready', () => {
						this.initCamera();
					});
				}
			}
			// #endif
		},
		onUnload() {
			this.isCameraOn = false;
		}
	}
</script>

<style lang="scss">
.camera-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f7fa;
	
	.header {
		padding: 20rpx 30rpx;
		background-color: #4CAF50;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		
		.header-left {
			display: flex;
			align-items: center;
			
			.iconfont {
				font-size: 40rpx;
				color: #ffffff;
				margin-right: 20rpx;
			}
			
			.header-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}
	
	.camera-view {
		position: relative;
		width: 100%;
		height: 50vh;
		background-color: #000000;
		transition: all 0.3s ease;
		
		&.fullscreen {
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		
		.camera {
			width: 100%;
			height: 100%;
		}
		
		.camera-controls {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			display: flex;
			gap: 20rpx;
			
			.control-btn {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				backdrop-filter: blur(10px);
				
				.iconfont {
					font-size: 40rpx;
					color: #ffffff;
				}
				
				&:active {
					transform: scale(0.95);
				}
			}
		}
		
		.camera-placeholder {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #2c2c2c;
			
			.placeholder-text {
				color: #ffffff;
				font-size: 28rpx;
				opacity: 0.7;
			}
		}
	}
	
	.device-info {
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.info-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.status {
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
				
				&.online {
					background-color: rgba(76, 175, 80, 0.1);
					color: #4CAF50;
				}
			}
		}
		
		.info-content {
			.info-item {
				display: flex;
				margin-bottom: 16rpx;
				
				.label {
					font-size: 28rpx;
					color: #666666;
					width: 160rpx;
				}
				
				.value {
					font-size: 28rpx;
					color: #333333;
					flex: 1;
				}
			}
		}
	}
}
</style>
